<template>
 <div class="wrapper">
   <div class="content">
     <ul>
       <li>分类内容1</li>
       <li>分类内容2</li>
       <li>分类内容3</li>
       <li>分类内容4</li>
       <li>分类内容5</li>
       <li>分类内容6</li>
       <li>分类内容7</li>
       <li>分类内容8</li>
       <li>分类内容9</li>
       <li>分类内容10</li>
       <li>分类内容11</li>
       <li>分类内容12</li>
       <li>分类内容13</li>
       <li>分类内容14</li>
       <li>分类内容15</li>
       <li>分类内容16</li>
       <li>分类内容17</li>
       <li>分类内容18</li>
       <li>分类内容19</li>
       <li>分类内容20</li>
       <li>分类内容21</li>
       <li>分类内容22</li>
       <li>分类内容23</li>
       <li>分类内容24</li>
       <li>分类内容25</li>
       <li>分类内容26</li>
       <li>分类内容27</li>
       <li>分类内容28</li>
       <li>分类内容29</li>
       <li>分类内容30</li>
       <li>分类内容31</li>
       <li>分类内容32</li>
       <li>分类内容33</li>
       <li>分类内容34</li>
       <li>分类内容35</li>
       <li>分类内容36</li>
       <li>分类内容37</li>
       <li>分类内容38</li>
       <li>分类内容39</li>
       <li>分类内容40</li>
       <li>分类内容41</li>
       <li>分类内容42</li>
       <li>分类内容43</li>
       <li>分类内容44</li>
       <li>分类内容45</li>
       <li>分类内容46</li>
       <li>分类内容47</li>
       <li>分类内容48</li>
       <li>分类内容49</li>
       <li>分类内容50</li>
     </ul>
   </div>
 </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    name: "Category",
    data(){
      return {
        scroll:null
      }
    },
    mounted() {
      this.scroll=  new BScroll('.wrapper',{
        probeType:3,
        pullUpLoad:true
      })
      this.scroll.on('scroll',(position)=>{
        // console.log(position);
      })
      this.scroll.on('pullingUp',()=>{
        console.log(`上拉加载更多`);
        setTimeout(() => {
          this.scroll.finishPullUp()
        }, 2000)
      })
    }
  }
</script>

<style scoped>
.wrapper{
  height: 150px;
  background-color: #f00;
  overflow: hidden;
}
</style>
